<template>
	<div class="clearFix" style="margin: 0 auto;">
		<string style="display: block;"><a href="https://vue-3d-model.netlify.app/zh/examples/example-basic/">vue-3d-model
				中文网站</a></string>
		<div style="width: 50%;" class="f_l">
			<model-obj class="model-box" src="/src/assets/obj/tree.obj"></model-obj>
			<!-- <model-obj class="model-box" src="/src/assets/obj/tree.obj"></model-obj> -->
			<ModelThree src="/src/assets/obj/scene.json"></ModelThree>
			<ModelCollada src="/src/assets/obj/elf.dae" :rotation="rotation" @load="onLoad"></ModelCollada>
			<model-stl src="/src/assets/obj/gear.stl"></model-stl>
			<model-gltf src="/src/assets/obj/Duck.gltf"></model-gltf>
		</div>
		<div class="tipStyle f_r" style="width: 50%;">
			<strong>vue-3d-model使用：</strong><br />
			不同得组件显示不同的文件模型：<br />
			使用这个命令安装 npm install vue-3d-model@2.0.0-alpha.4<br />
			页面引入：<br />
			import {<br />
			ModelObj, //obj<br />
			ModelThree, //json<br />
			ModelFbx,  // fbx<br />
			ModelCollada, //dea<br />
			ModelStl,  //dea<br />
			ModelPly,  // ply<br />
			ModelGltf  // gltf<br />
			} from 'vue-3d-model';<br />
			<strong style="color: red;">注意：文件引入的格式要是绝对路径,必须是绝对路径，否则会报错</strong><br />
			vue页面使用：<br />
			例：&lt;model-obj class="model-box" src="/src/assets/obj/tree.obj"&gt;&lt;/model-obj&gt;<br />

			<a target="_blank" href="https://vue-3d-model.netlify.app/zh/guide/api/#%E5%B1%9E%E6%80%A7">相关属性配置查阅官网：<br />
			</a>https://vue-3d-model.netlify.app/zh/guide/api/#属性
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue"
// import thrObj from "../assets/obj/tree.obj"
import {
	ModelObj,
	ModelThree,
	ModelFbx,
	ModelCollada,
	ModelStl,
	ModelPly,
	ModelGltf
} from 'vue-3d-model';
const rotation = reactive({ x: -Math.PI / 2, y: 0, z: 0 });
const onLoad = () => {
	rotate();
};
const rotate = () => {
	requestAnimationFrame(rotate);
	rotation.z += 0.01;
};
</script>

<style scoped="scoped"></style>
